<!--个人信息管理：展示数据，并提供修改操作
    1.修改密码
    2.修改头像
    3.修改房屋认证
-->
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <p style="display:inline">
          修改头像：
        </p>
        <el-upload class="avatar-uploader"
                   action="http://192.168.11.18:8080/file/uploadImage"
                   :show-file-list="false"
                   :on-success="getUploadFileName"
                   style="display:inline">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
      <el-col :span="8">
        <p>昵称:<font>{{account}}</font>
        </p>
        <p>联系邮箱:<font>{{email}}</font>
        </p>
        新增认证房屋：
        <el-button type="danger"
                   size="mini"
                   @click="inserthouse()">点击新增</el-button>
        <br><br>
        修改密码：
        <el-button type="info"
                   size="mini"
                   @click="updatepwd()">点击修改密码</el-button><br><br>
      </el-col>
    </el-row>

    <p>我的房屋：</p>
    <el-table :data="tableData">
      <el-table-column prop="community"
                       label="小区"
                       width="140"
                       align="center">
      </el-table-column>
      <el-table-column prop="building"
                       label="楼栋号"
                       width="120"
                       align="center">
      </el-table-column>
      <el-table-column prop="unit"
                       label="单元号"
                       align="center">
      </el-table-column>
      <el-table-column prop="num"
                       label="房间号"
                       align="center">
      </el-table-column>

      <el-table-column prop="def"
                       label="开启默认"
                       width="200"
                       align="center">
        <template slot-scope="td">
          <el-switch v-model="td.row.def"
                     active-text="开启"
                     inactive-text="关闭"
                     @change="changeStatus(td.row)">
          </el-switch>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="修改具体信息"
                       width="300"
                       align="center">
        <template slot-scope="td">
          <!-- 修改 -->
          <el-button type="primary"
                     @click="updatehouse(td.row)">修改</el-button>
          <!-- 删除 -->
          <el-popconfirm title="您确定要删除该套房屋吗"
                         @confirm="deletehouse(td.$index,td.row)">
            <el-button slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <!--新增房屋认证-->

    </el-table>
    <!-- 
    修改个人资料：
    <el-button type="info"
               size="mini"
               @click="updateinfo">点击修改资料</el-button> -->

    <!-- 修改密码：对话框 -->
    <el-dialog title="修改密码"
               :visible.sync="updatePwdVisible"
               width="60%">
      <!-- 3.使用子组件 -->
      <updatepwd :email="email"
                 v-if="refresh"
                 @closedialog="updatePwdVisible=false"></updatepwd>
    </el-dialog>

    <!-- 修改房屋认证：对话框 -->
    <el-dialog title="修改房屋认证"
               :visible.sync="updatehouseVisible"
               width="60%">
      <!-- 3.使用子组件 -->
      <updatehouse :chouse="house"
                   v-if="refresh"
                   @closeUpdatedialog="updateCommit"></updatehouse>
    </el-dialog>

    <!-- 新增房屋认证：对话框 -->
    <el-dialog title="新增房屋认证"
               :visible.sync="inserthouseVisible"
               width="60%">
      <!-- 3.使用子组件 -->
      <inserthouse :chouse="house"
                   v-if="refresh"
                   @closeinsertdialog="insertCommit"></inserthouse>
    </el-dialog>
    <!-- 删除房屋认证：对话框 -->
    <el-dialog title="删除房屋认证"
               :visible.sync="deletehouseVisible"
               width="60%">
      <!-- 3.使用子组件 -->
      <deletehouse :chouse="house"
                   v-if="refresh"
                   @closedeletedialog="deleteCommit"></deletehouse>
    </el-dialog>

    <!-- 修改基础信息：对话框 -->
    <el-dialog title="修改个人信息"
               :visible.sync="updateinfoVisible"
               width="60%">
      <info :cdetail="detail"
            v-if="refresh"
            @closeinfodialog="updateinfoCommit"></info>
    </el-dialog>

  </div>
</template>

<script>
import updatepwd from './updatepwd'
import updatehouse from './updatehouse'
import inserthouse from './inserthouse'
import deletehouse from './deletehouse'
import info from './info'

import http from '../../../axios_config'

export default {
  data () {
    return {
      updatePwdVisible: false,//控制修改密码对话框是否显示
      inserthouseVisible: false,//控制新增房屋认证对话框是否显示
      updatehouseVisible: false,//控制修该房屋认证对话框是否显示
      deletehouseVisible: false,//控制删除房屋认证对话框是否显示
      updateinfoVisible: false,//控制修改个人信息对话框是否显示
      refresh: true,        //强制刷新子组件
      tableData: [],//表格数据
      id: 1,
      account: "",
      email: "",
      imageUrl: "",
      password: "",
      house: {
        id: this.id,//房屋id
        cid: this.cid,
        community: this.community,
        building: this.building,
        unit: this.unit,
        num: this.num
      },
      detail: {
        account: this.account,
        email: this.email
      },

    }
  },
  methods: {
    //头像上传
    getUploadFileName (res) {
      console.log("111");
      this.dialogImageUrl = res;
      this.imageUrl = res;
      http.get("http://192.168.11.18:8080/user/changeImage?img=" + this.imageUrl)
        .then(result => {
          console.log(result);
        });
      console.log(res);
    },

    //获取用户信息
    getdetail () {
      console.info("获取用户信息");
      http.get("http://192.168.11.18:8080/user/findDetail")
        .then(res => {
          console.info(res.data);
          this.id = res.data.id;
          this.account = res.data.account;
          this.email = res.data.email;
          this.imageUrl = res.data.image;
          this.detail.account = this.account;
          this.imageUrl = this.imageUrl;
          this.detail.email = this.email;
          for (let i = 0; i < res.data.houseDto.length; i++) {
            let temphouse = res.data.houseDto[i];
            this.house = {
              id: temphouse.id,
              cid: temphouse.community.id,
              def: temphouse.def,
              community: temphouse.community.name,
              building: temphouse.building,
              unit: temphouse.unit,
              num: temphouse.num
            }
            console.log(temphouse.def);
            this.tableData.push(this.house);
          }

        });
    },
    //修改用户密码
    updatepwd () {
      this.updatePwdVisible = true; //控制对话框是否显示 
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    },
    //新增房屋认证
    inserthouse () {
      this.inserthouseVisible = true; //控制对话框是否显示   
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    },
    //修改房屋认证
    updatehouse (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      this.updatehouseVisible = true; //控制对话框是否显示
      this.house = row;//将提示框类容更新
    },
    //删除房屋
    deletehouse (index, row) {
      let param = new URLSearchParams();
      param.append("hid", row.id);
      http.post("http://192.168.11.18:8080/house/delHouse", param)
        .then(res => {
          if (res.data.statusCode == 200) {
            console.log("删除成功");
            this.tableData.splice(index, 1);
          }
        });
    },
    //修改默认房屋
    changeStatus (row) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id != row.id) {
          this.tableData[i].def = false;
        }
      }
      http.get("http://192.168.11.18:8080/house/updateDefHouse?id=" + row.id)
        .then(res => {
          console.log(res.data);
        });
    },
    //提交新增房屋
    insertCommit (data) {
      this.inserthouseVisible = false;
      if (data.result == false) {
        console.log("取消新增房屋");
      } else {
        //发送请求新增房屋
        //发送请求，修改数据库
        let params = new URLSearchParams();
        //封装数据
        params.append("id", this.id);//用户id
        params.append("cid", this.house.cid);//小区id
        params.append("community", data.data.community);//小区名
        params.append("building", data.data.building);//楼栋号
        params.append("unit", data.data.unit);//单元号
        params.append("num", data.data.num);//房间哈

        http.post("http://192.168.11.18:8080/house/insertHouse", params)
          .then(res => {
            console.log(res);
            if (res.data.statusCode == "200") {
              this.$message("新增成功");
              this.tableData = [];
              this.getdetail();
            } else {
              this.$message("新增失败，小区未被认证");
            }
          });

      }
    },
    //提交修改房屋
    updateCommit (data) {
      this.updatehouseVisible = false;
      if (data.result == false) {
        console.info("取消修改");
      } else {
        let params = new URLSearchParams();
        //封装数据
        params.append("id", this.id);//用户id
        params.append("hid", this.house.id);//房屋id
        params.append("cid", this.house.cid);//楼栋号
        params.append("building", data.data.building);//楼栋号
        params.append("unit", data.data.unit);//单元号
        params.append("num", data.data.num);//房间号
        console.log(this.id + ":" + this.cid + ":" + data.data.building + ":" + data.data.unit + ":" + data.data.num);
        http.post("http://192.168.11.18:8080/house/updateHouse", params)
          .then(res => {
            console.log(res);
            console.log(res.data);
            if (res.data.statusCode == "200") {
              this.$message("修改成功");
              this.tableData = [];
              this.getdetail();
            } else {
              this.$message("修改失败，该房屋以被认证");
            }
          });
      }
    },
    //提交删除房屋
    deleteCommit (data) {
      this.deletehouseVisible = false;
      if (data.result == false) {
        console.log("取消删除");
      } else {
        console.log("同意删除：hid=" + data.data);
        let param = new URLSearchParams();
        param.append("hid", data.data);
        http.post("http://192.168.11.18:8080/house/delHouse", param)
          .then(res => {
            if (res.data.statusCode == 200) {
              console.log("删除成功");
              for (let i = 0; i < this.tableData.length; i++) {
                if (data.data == this.tableData[i].id) {
                  this.tableData.pop[i];
                }
              }
              this.$router.go(0);

            }
          });
      }
    },
    //个人资料提交
    updateinfoCommit () {

    },
    //修改密码
    commitPwd (data) {
      console.log(data);
    }

  },
  //2.注册子组件
  components: {
    updatepwd,
    updatehouse,
    inserthouse,
    deletehouse,
    info
  },
  //当前组件创建完毕
  mounted () {
    //调用方法获取用户信息
    this.getdetail();
  }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>